<template>
  <div>
    <y-shelf :title="isMerchant | nameFilter">
      <div slot="content" style="text-align: center">
        <div v-if="isMerchant">
          <div v-if="productTotal">
            <div class="table-waper">
              <div class="gray-sub-title cart-title">
                <div class="first">
                  <div>
                    <span class="order-id"> 商品号： </span>
                  </div>
                  <div class="f-bc">
                    <span class="price">单价</span>
                    <span class="num">销量</span>
                    <span class="operation">访问量</span>
                  </div>
                </div>
                <div class="last">
                  <span class="sub-total">主标签 </span>
                  <span class="order-detail">副标签  </span>
                </div>
              </div>
            </div>
            <div v-for="(item,i) in productList" :key="i" class="table-waper">
              <div class="gray-sub-title cart-title">
                <div class="first">
                  <router-link :to="'/goodsDetails?productId='+item.id">
                    {{ item.name }}
                  </router-link>
                  <div class="f-bc">
                    <span class="price">{{ item.prices }}</span>
                    <span class="num">{{ item.sellCount }}</span>
                    <span class="operation">{{ item.viewCount }}</span>
                  </div>
                </div>
                <div class="last">
                  <span class="sub-total"> {{ item.mainType }}</span>
                  <span class="order-detail"> {{ item.sunType }} </span>
                </div>
              </div>
            </div>
            <el-pagination
              layout="total,prev, pager,next"
              :total="productTotal"
              :current-page="listQuery.page"
              :page-size="listQuery.size"
              @current-change="handleCurrentChange"
            />
          </div>
          <div v-else>
            这里空空如也， 请到后台界面添加商品
          </div>
        </div>
        <!-- 用户条款 -->
        <div v-else style="padding: 100px 0">
          用户条款
          <div style="padding:20px 0">
            <el-collapse>
              <el-collapse-item title="诚信经营承诺书" name="1">
                为共同构建诚信、透明的网络消费环境，共同维护公平、规范的网络经营秩序，共同促进电子商务生态系统的健康持续发展，本店（本人）特向广大网民及网站承诺如下：
                <ul>
                  <li>一、 不参与、不加入、不组建任何交易信用炒作组织（该交易信用包括商品销量、评价、DSR评分等）；</li>
                  <li>二、 不进行 任何交易信用炒作行为，保证每一笔交易内容、交易信用均为真实、可信，绝无虚构、炒作行为。</li>
                  <li>三、 不发布、不传播、不推广任何有关交易信用炒作的违规信息，并积极举报此类违规信息；</li>
                  <li>四、 积极接受广大网民及网站的监督，严格遵守、积极维护网站交易信用体系的各项规则；</li>
                  <li>五、 若本店违反网站交易信用体系的各项规则，本店愿意接受网站的相应处理措施，并承担因此引发的相关责任。</li>
                </ul>
                本店郑重承诺：本店将始终恪守上述承诺，不进行任何形式的交易信用炒作行为，严格遵守国家法律法规及网站的相关规定，诚信、公平、规范地开展经营活动。
                <br>
                <el-radio v-model="item1" label="1"> 同意</el-radio>
                <el-radio v-model="item1" label="2"> 不同意</el-radio>
              </el-collapse-item>
              <el-collapse-item title="危险物品合规承诺书" name="2">
                本店铺已明确知晓下述内容：依照《互联网危险物品信息发布管理规定》，危险物品系指枪支弹药、爆炸物品、剧毒化学品、易制爆危险化学品和其他危险化学品、放射性物品、核材料、管制器具等能够危及人身安全和财产安全的物品。平站台已经制定相应的禁售规则，禁止会员在平站台发布上述危险物品信息、交易上述危险物品。

                本店铺郑重承诺如下：严格遵守《反恐怖主义法》、《网络安全法》、《广告法》、《互联网信息服务管理办法》、《计算机信息网络国际联网安全保护管理办法》、《枪支管理法》、《民用爆炸物品安全管理条例》、《危险化学品安全管理条例》和《互联网危险物品信息发布管理规定》等法律法规和政策文件的规定，并保证履行以下安全责任：

                <ul>
                  <li>一、自觉遵守国家现行有关安全管理、危险物品管理的法律法规和政策文件规定，积极配合有关监管部门开展的安全监督与执法检查活动。</li>
                  <li>二、自觉遵守平站台关于危险物品的相关禁售规则，积极开展商品信息的自检自查工作，不发布、不传播、不交易上述危险物品，依规配合平站台针对危险物品开展的商品信息与交易管理工作。</li>
                  <li>三、在商品信息发布与交易履行过程中，不弄虚作假规避有关监管部门及平站台针对危险物品的管理工作。</li>
                  <li>四、若所售物品并非危险物品，但其可用于制造使用危险物品或可用于非法用途，绝不对相关危险物品的制造使用方法及非法用途进行介绍。若在交易中发现买方存在违法犯罪嫌疑，立即停止与其交易，并将相关线索上报相关监管部门或平台管理部门。</li>
                </ul>
                本店铺已知晓上述义务，并作出安全责任承诺。若本人不履行上述法定义务与责任承诺，导致违法犯罪活动发生或其他损害后果，本人将依法承担相应的法律责任。
                <br>
                <el-radio v-model="item2" label="1"> 同意</el-radio>
                <el-radio v-model="item2" label="2"> 不同意</el-radio>
              </el-collapse-item>
            </el-collapse>
          </div>
          <y-button :class-style="isSummitOk" style="margin: 10px; padding 10px" text="提交申请" @btnClick="handleApply" />
        </div>
      </div>
    </y-shelf>
  </div>
</template>
<script>
import YShelf from '@/components/shelf'
import YButton from '@/components/YButton'
import { applyMerchant, getMerchantProduct } from '@/api/merchant'
import { mapState } from 'vuex'
export default {
  components: {
    YShelf,
    YButton
  },
  filters: {
    nameFilter(isMerchant) {
      return isMerchant ? '我的商铺' : '申请成为商家'
    }
  },
  props: {
    isMerchant: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      item1: '2', // 成为商家的条款
      item2: '2',
      productList: [],
      productTotal: 0,
      listQuery: {
        page: 1,
        size: 10
      }
    }
  },
  computed: {
    isSummitOk() {
      return (this.item1 !== '1' || this.item2 !== '1') ? 'disabled-btn' : 'main-btn'
    },
    ...mapState(['userInfo'])
  },
  created() {
    this.loadProudct()
  },
  methods: {
    handleApply() {
      console.log(this.userInfo.info)
      applyMerchant(this.userInfo.info.id).then(res => {
        this.$notify({
          title: '提示',
          message: res.data,
          duration: 0
        })
      }, err => {
        console.log(err)
        this.$message.error('发生错误 提交申请失败')
      })
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.loadProudct()
    },
    loadProudct() {
      const query = {
        page: this.listQuery.page,
        size: this.listQuery.size
      }
      getMerchantProduct(query).then(res => {
        if (!res.success) {
          this.$message.warning('some thing wrong in server')
          return
        }
        this.productList = res.data.items
        this.productTotal = res.data.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../assets/style/mixin";

  .table-waper {
    height: 100%;
  }

  .gray-sub-title {
    height: 38px;
    padding: 0 24px;
    background: #EEE;
    border-top: 1px solid #DBDBDB;
    border-bottom: 1px solid #DBDBDB;
    line-height: 38px;
    font-size: 12px;
    color: #666;
    display: flex;
    span {
      display: inline-block;
      height: 100%;
    }
    .first {
      display: flex;
      justify-content: space-between;
      flex: 1;
      .f-bc {
        > span {
          width: 112px;
          text-align: center;
        }
      }
    }
    .last {
      width: 230px;
      text-align: center;
      display: flex;
      border-left: 1px solid #ccc;
      span {
        flex: 1;
      }
    }
  }

  .bt {
    border-top: 1px solid #EFEFEF;
  }

  .date {
    padding-left: 6px;
  }

  .order-id {
    margin-left: 20px;
  }

  .cart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    &:hover {
      .del-order {
        display: block;
      }
    }
    .del-order {
      display: none;
    }
    .cart-l {
      display: flex;
      align-items: center;
      flex: 1;
      padding: 15px 0;
      justify-content: space-between;
      position: relative;
      &:before {
        position: absolute;
        content: ' ';
        right: -1px;
        top: 0;
        width: 1px;
        background-color: #EFEFEF;
        height: 100%;
      }
      .ellipsis {
        margin-left: 20px;
        width: 220px;
      }
      .img-box {
        border: 1px solid #EBEBEB;
      }
      img {
        display: block;
        @include wh(80px);
      }
      .cart-l-r {
        display: flex;
        > div {
          text-align: center;
          width: 112px;
        }
      }
      .cart-l-l {
        display: flex;
        align-items: center;
      }
    }
    .cart-r {
      width: 230px;
      display: flex;
      span {
        text-align: center;
        flex: 1;
      }
    }
  }

</style>
